<template>
    <view :style="{ '--color': color }">
        <navBar title="赠送记录"></navBar>
        <view class="Tab">
            <u-tabs
                :list="list1"
                :scrollable="false"
                :activeStyle="activeStyle"
                :inactiveStyle="inactiveStyle"
                :current="current"
                lineColor="#333333"
                :lineHeight="2"
                :lineWidth="30"
                @click="click"
            ></u-tabs>
        </view>

        <view class="list" @click="toDetails">
            <view class="product">
                <image :src="headImg" mode="aspectFill" class="product-img"></image>
                <view class="product-box">
                    <text class="ellipsis black size28">商品或服务名1</text>
                    <text class="ellipsis color_33 size26 m-top10">摘要摘要摘要摘要摘要摘要摘要</text>
                </view>
            </view>
            <view class="winner">
                <view class="winner-Info">
                    <view class="Info_text">
                        <view class="Info_text_title">领取人:</view>
                        <text class="ellipsis color size28">微信昵称（1345****911）</text>
                    </view>
                    <view class="Info_text">
                        <view class="Info_text_title">领取时间:</view>
                        <text class="ellipsis color size28">2024-07-15 12:24:14</text>
                    </view>
                </view>
                <view class="iconfont icon-a-zujian32 color_cc size30"></view>
            </view>
        </view>

        <view class="list" @click="toDetails">
            <view class="product">
                <image :src="headImg" mode="aspectFill" class="product-img"></image>
                <view class="product-box">
                    <text class="ellipsis black size28">商品或服务名1</text>
                    <text class="ellipsis color_33 size26 m-top10">摘要摘要摘要摘要摘要摘要摘要</text>
                </view>
            </view>
            <view class="winner">
                <view class="winner-Info">
                    <view class="Info_text">
                        <view class="Info_text_title">分享人:</view>
                        <text class="ellipsis color size28">微信昵称（1345****911）</text>
                    </view>
                    <view class="Info_text">
                        <view class="Info_text_title">领取时间:</view>
                        <text class="ellipsis color size28">2024-07-15 12:24:14</text>
                    </view>
                </view>
                <view class="iconfont icon-a-zujian32 color_cc size30"></view>
            </view>
        </view>

        <emptys title="暂无相关记录"></emptys>
    </view>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        data() {
            return {
                headImg: 'https://msraimgcdn.mogoie.com/6099/1691810360037.jpg',
                list1: [
                    {
                        name: '赠送(5)'
                    },
                    {
                        name: '接收(6)'
                    }
                ],
                current: 0
            }
        },
        methods: {
            toDetails() {
                this.toUrl(`/subCard/userDetails`)
            },
            click(e) {
                this.current = e.index
            }
        },
        computed: {
            ...mapState(['color']),
            activeStyle() {
                return {
                    fontSize: '34rpx'
                }
            },
            inactiveStyle() {
                return {
                    fontSize: '30rpx'
                }
            }
        }
    }
</script>
<style>
    page {
        background-color: #f2f2f2;
    }
</style>
<style lang="scss" scoped>
    .Tab {
        width: 100%;
        padding: 0 50rpx;
        height: 100rpx;
    }
    .list {
        width: 690rpx;
        background-color: #ffffff;
        padding: 24rpx;
        border-radius: 10rpx;
        margin: 20rpx auto 0;
    }
    .product {
        width: 100%;
        display: flex;
        align-items: center;
        &-img {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            margin-right: 24rpx;
        }
        &-box {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
    }
    .winner {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 10rpx;
        &-Info {
            flex: 1;
            .Info_text {
                display: flex;
                align-items: center;
                margin-top: 10rpx;
                .Info_text_title {
                    width: 180rpx;
                    text-align: right;
                    margin-right: 14rpx;
                    font-size: 26rpx;
                    color: #333;
                }
            }
        }
    }
</style>
